<template>
  <div class="h100p bgf5f6">
    <FormId>
      <div class="disflex radar_menu jsbet bgfff pl36 pr37 fs16 c78 lh44">
        <span :class="type1_id == 0 ? 'active' : '' " @click="type1_tap(0)">AI追踪</span>
        <span :class="type1_id == 1 ? 'active' : '' " @click="type1_tap(1)">AI分析</span>
        <span :class="type1_id == 2 ? 'active' : '' " @click="type1_tap(2)">成交率</span>
      </div>
    </FormId>

    <FormId>
      <div class="disflex jscen pt8 pb10 radar_trace fs12 lh30 textc btf5f6 bgfff menus" v-if="menu[type1_id]">
            <span v-for="(v,k) in menu[type1_id]" :key="k"
                  :class="type2_id == v.id ? 'active' : ''"
                  @click="type2_tap(v.id)"
                  class="time">{{v.title}}</span>
      </div>
    </FormId>
    <AddNoticeNum ref="noticeNum"></AddNoticeNum>

    <div class=" pl15 pr15 bgfff fs14 ca8 lh26 trans2 pb10"
         v-if="menu[type1_id] && menu[type1_id][type2_id] && menu[type1_id][type2_id].child" >
      <div
           class="disflex jsbet">
                <span class="bfff pl10 pr11 cb8 bradius5 h26 borderbox"
                      :class="type3_id == v.id?'bblue cblue' : ''"
                      v-for="(v,k) in menu[type1_id][type2_id].child"
                      :key="k"
                      @click="type3_tap(v.id)"
                >{{v.title}}</span>
      </div>
    </div>

    <template v-if="!lists.length">
      <NoData>暂无数据</NoData>
    </template>
    <template v-else>
      <!--今天-->
      <div v-if="type1_id == 0">
        <div class="pl15 pr15" v-for="(v,k) in ai_lists" :key="k">
          <p class="lh36 fs12 ca8">{{k}}</p>
          <div class="mb10" v-for="(v2,k2) in v" :key="k2">
            <MsgBox :msg="v2"
                    :type="type"
                    :istime="type1_id != 1"
                    :isrank="type1_id == 1"
                    :isaction="true"
                    :isusertag="true"
                    :bradius="'bradius5'"
                    @row_tap="row_tap">
            </MsgBox>
          </div>
        </div>
      </div>

      <div v-else class="pt15">
        <div class="pl15 pr15" v-for="(v,k) in lists" :key="k">
          <div class="mb10">
            <MsgBox :msg="v"
                    :type="type"
                    :istime="false"
                    :isrank="true"
                    :isaction="true"
                    :isusertag="true"
                    :bradius="'bradius5'"
                    :index="k"
                    @row_tap="row_tap">
            </MsgBox>
          </div>
        </div>

      </div>
    </template>

    <!--    <div v-else-if="type1_id == 2" class="pt15">
            <div class="pl15 pr15" v-for="(v,k) in lists" :key="k">
                <div class="mb10">
                    <MsgBox :msg="v"
                            :type="type"
                            :istime="true"
                            :isrank="false"
                            :isaction="true"
                            :isusertag="true"
                            :bradius="'bradius5'"
                            :actionType="'rate'"
                            @row_tap="row_tap">
                    </MsgBox>
                </div>
            </div>

        </div>-->

    <!--bottom-->
    <div class="textc lh42 fs12 ca8 bgf5f6" v-if="lists.length && nodata">- 到底了，看看其他的吧 -</div>

    <!--未创建名片提示-->
    <div v-show="nocard_show">
      <DialogBox :dialog_title="'提示'" @btn_tap="nocard_btn_tap" :dialog_ph="'您还没有名片哦，请先创建自己的名片再进入'"
                 :type="'hint2'"
                 :left="'取消'"
                 :right="'创建名片'"
      ></DialogBox>
    </div>
    <!--之前-->
    <!--<div class="pl15 pr15">
        <p class="lh36 fs12 ca8">昨天</p>
        <div v-for="(msgitem,k) in before_today" :key="k" class="mb10">
            <MsgBox :msg="msgitem"
                    :type="type"
                    :istime="type1_id != 1"
                    :isrank="type1_id == 1"
                    :isaction="true"
                    :bradius="'bradius5'"
                    @row_tap="row_tap">
            </MsgBox>
        </div>
    </div>-->


  </div>
</template>

<script>
  import MsgBox from '@/components/msgBox' // 订单项
  import AddNoticeNum from '@/components/AddNoticeNum';
  import WXAJAX from '../../utils/request'
  import FormId from '@/components/formId'
  import NoData from '@/components/noData'
  import DialogBox from '@/components/dialogBox' // 对话框

  export default {
    data() {
      return {
        type1_id: '0',
        type2_id: '0',
        type3_id: '1',
        nocard_show: false,
        menu: [
          [
            {title: '时间追踪', id: 0,},
            {
              title: '行为追踪', id: 1,
              child: [
                {title: '看名片', id: 1,},
                {title: '看产品', id: 2,},
                {title: '看动态', id: 4,},
                {title: '看官网', id: 3,},
              ]
            }
          ],
          [
            {title: '查看名片', id: 1,},
            {title: '重视产品', id: 2,},
            {title: '关注动态', id: 4,},
            {title: '关注企业', id: 3,}
          ],
        ],
        lists: [],
        ai_lists: {}, //解决AI追踪时间排序
        type: 1,
        islogin: true,//是否已经登录
        wxCode: '',
        page: 1,
        isLoading: false,//是否在加载
        nodata: false,//是否已经没有数据
        seeType: {
          1: {
            title: '名片',
            1: '现在沟通，效率更高哦',
            4: '成交有望'
          },
          2: {
            title: '产品',
            1: '尽快把握商机',
            4: '可标注为重点客户',
          },
          3: {
            title: '官网',
            1: '有望合作',
            4: '可标注为重点客户',
          },
          4: {
            title: '动态',
            1: '合作意向很强烈',
            4: '成单在望',
          }
        },
        infoText: {}
      }
    },

    components: {MsgBox, FormId, NoData, DialogBox,AddNoticeNum},

    onShow() {
      wx.setNavigationBarTitle({
        title: "雷达"
      });
      this.lists = [];
      this.ai_lists = {};
      this.page = 1;
      this.nocard_show = false;
      this.isLoading = false;
      this.getInits();
      this.$refs.noticeNum && this.$refs.noticeNum.getTotalNum();
    },
    onReachBottom() {
      let v = this;
      v.getInits();
    },
    async onPullDownRefresh() {
      // to doing..
      // 下拉刷新
      wx.showNavigationBarLoading();
      this.nodata = false;
      this.lists = [];
      this.ai_lists = {};
      this.page = 1;
      this.isLoading = false;
      this.getInits();
      wx.stopPullDownRefresh();
      setTimeout(function () {
        wx.hideNavigationBarLoading();
      }, 300)
    },
    methods: {
      nocard_btn_tap(str) {
        console.log(str);
        if (str == 'save') {
          wx.navigateTo({url: '../editCard/main?type=add'})
        }
        this.nocard_show = false;
      },
      getInits() {
        let v = this,
          params = {};

        if (v.isLoading) {
          wx.hideLoading();
          return
        }
        v.isLoading = true;

        // entranceType : 入口类型（1:时间追踪，2：行为追踪，3：ai分析,4,成交率）
        // seeType :  查看类型 1:名片，2:产品，3：官网,4:查看动态
        if (this.type1_id == 0) { //智能追踪
          if (this.type2_id == 0) {
            params.entranceType = 1;
          } else if (this.type2_id == 1) {
            params.entranceType = 2;
            params.seeType = this.type3_id;
          }
        } else if (this.type1_id == 1) { //AI分析
          params.entranceType = 3;
          params.seeType = this.type2_id;
        } else if (this.type1_id == 2) {//成交率
          params.entranceType = 4;
          //params.seeType = 2;
        }
        params.pageNum = v.page;

        wx.showLoading();
        WXAJAX.POST(params, '', '/seeRecord/getSeeRecordList').then((data, code) => {

          wx.hideLoading();
          if (data) {
            let today = new Date(),
              year = today.getFullYear(),
              month = today.getMonth()+1,
              day = today.getDate(),
              item = {},
              _datas = {},
              _length = v.lists.length ,
              _lastFullTime = 0 ;

            _length !=0 && (_lastFullTime = v.lists[_length-1][0].fullTime) ;

            if (v.type1_id == 0) { // 智能追踪， 分时间显示
              let tmp = JSON.parse(JSON.stringify(v.ai_lists));
              data.forEach(function (i, k) {
                var time = new Date(i.createTime),
                  fullTime = time.getFullYear() + '' + (time.getMonth()+1) + '' + time.getDate(),
                  showTime = '',
                  info = '';
                if (time.getFullYear() < year) {//今年之前
                  showTime = time.getFullYear() + '-' + (time.getMonth()+1) + '-' + time.getDate();
                } else {//今年
                  if ((time.getMonth()+1) == month) {
                    if (time.getDate() == day) {//今天
                      showTime = '今天';
                    } else if (time.getDate() + 1 == day) {//昨天
                      showTime = '昨天';
                    } else {
                      showTime = (time.getMonth()+1) + '-' + time.getDate();
                    }
                  } else {
                    showTime = (time.getMonth()+1) + '-' + time.getDate();
                  }
                }

                if (i.ranking < 3) {
                  info = v.seeType[i.seeType][1];
                } else {
                  info = v.seeType[i.seeType][4];
                }


                item = Object.assign(i, {
                  fullTime: fullTime,//年月日
                  time: showTime,//页面显示时间
                  logo: i.logo,
                  see: v.seeType[i.seeType].title,
                  action: '查看',
                  num: i.num,
                  hour: time.getHours().toString().padStart(2, '0') + ':' + time.getMinutes().toString().padStart(2, '0'),
                  info: info,
                });

                if (tmp[showTime]){
                  tmp[showTime].push(item);
                }else{
                  tmp[showTime] = [item];
                }
              //
              //   if(_lastFullTime == fullTime){
              //     v.lists[_length-1].push(item);
              //   }else{
              //     if (_datas[fullTime]) {
              //       _datas[fullTime].push(item);
              //     } else {
              //       _datas[fullTime] = [];
              //       _datas[fullTime].push(item);
              //     }
              //   }
              });
              v.ai_lists = tmp;

              v.lists = Object.keys(v.ai_lists);
              // console.log(_datas)

              // var newkey = Object.keys(_datas);
              // //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
              // var newObj = {};//创建一个新的对象，用于存放排好序的键值对
              // for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
              //   newObj[newkey[i]] = _datas[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
              // }

              // _datas = [];
              // for (var i in newObj) {
              //   _datas.push(newObj[i]);
              // }
              // _datas = _datas.reverse();
              // v.lists = [...v.lists, ..._datas];
            } else {
              _datas = [];
              data.forEach(function (i, k) {
                var time = new Date(i.createTime),
                  info = '';
                if (i.ranking < 3) {
                  info = v.seeType[i.seeType][1];
                } else {
                  info = v.seeType[i.seeType][4];
                }

                item = Object.assign(i, {
                  logo: i.logo,
                  see: v.seeType[i.seeType].title,
                  action: '查看',
                  num: i.num,
                  hour: time.getHours() + ':' + time.getMinutes(),
                  rate: i.rate ? (i.rate * 100).toFixed(2) + '%' : '',
                  info: info,
                  userId : i.userId ,
                  entranceType: params.entranceType,
                });
                console.log(item)
                _datas.push(item);
              });
              v.lists = [...v.lists, ..._datas];
            }
            v.page++;
            setTimeout(function () {
              v.isLoading = false;
            }, 500);

          } else if (code == 209) {

          } else {
            v.nodata = true;
          }
          setTimeout(function () {
            v.isLoading = false;
          }, 500);
        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
          if (err.code == 403) {
            this.nocard_show = true;
          }
          setTimeout(function () {
            v.isLoading = false;
          }, 500);
        });
      },
      type1_tap(id) {
        this.type1_id = id;
        if (this.menu[id]) {
          this.type2_id = this.menu[id][0].id;
        }
        if (id == 0) {
          this.type = 1;
        } else {
          this.type = 5;
        }
        this.nodata = false;
        this.lists = [];
        this.ai_lists = {};
        this.page = 1;
        this.isLoading = false;
        this.getInits();
      },
      type2_tap(id) {
        this.type2_id = id;
        this.nodata = false;
        this.lists = [];
        this.ai_lists = {};
        this.page = 1;
        this.isLoading = false;
        this.getInits();
      },
      type3_tap(id) {
        this.type3_id = id;
        this.nodata = false;
        this.lists = [];
        this.ai_lists = {};
        this.page = 1;
        this.isLoading = false;
        this.getInits();
      },
      row_tap(cardId , userId) {//选择AI客户

        wx.setStorageSync('AIUserId' , userId);
        wx.navigateTo({url: '../customerAnalysis/main?userId='+userId});
      },

    },

  }
</script>

<style>
  .radar_menu .active {
    color: #51CDCB;
    border-bottom: 2px solid #51CDCB;
  }

  .radar_trace .time {
    width: 80px;
    box-sizing: border-box;
    border: 0.5px solid #51CDCB;
    border-right: 0;
    color: #51CDCB;
    transition: .1s;
  }

  .radar_trace .time:last-child {
    border-right: 0.5px solid #51CDCB;
    border-radius: 0 15px 15px 0;
  }

  .radar_trace .time:first-child {
    border-radius: 15px 0 0 15px;
  }

  .radar_trace .active {
    background: #51CDCB;
    color: #fff;
  }


</style>








































